<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="search-box">
                    <el-button class="btnStyle" @click="dialogFormVisible = true" style="margin-bottom: 20px;"
                        v-has="'simAdd'">添加</el-button>
                    <div>
                        <el-form ref="formRef" :inline="true" class="demo-ruleForm">
                            <el-form-item porp="order_no">
                                <el-input type="text" v-model="SearchPhone" placeholder="手机号模糊搜索" style="width: 200px;" />
                            </el-form-item>
                            <el-form-item>
                                <el-button class="btnStyle" @click="searchClick">搜索</el-button>
                                <el-button class="btnStyle" @click="cancelClick">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <el-table v-loading="loading" element-loading-text="加载数据..." :data="data.SIM_DATA"
                    style="width: 100%;height: 100%;" size="small"
                    :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }">
                    <template #empty>
                        <el-empty description="暂无数据！" />
                    </template>
                    <el-table-column prop="id" label="ID" align="center" />
                    <el-table-column prop="phone" label="流量卡号" align="center" />
                    <el-table-column label="操作" align="center">
                        <template #default="{ row }">
                            <el-button class="del-btn" @click="removeSim(row)" v-has="'simRemove'"><el-icon>
                                    <Delete />
                                </el-icon></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
            <el-dialog v-model="dialogFormVisible" title="添加流量卡" width="30%">
                <el-form :model="form">
                    <el-form-item label="流量卡号：" prop="phone" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off" placeholder="输入13位流量卡号" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelFormClick">取消</el-button>
                        <el-button type="primary" @click="addPhone">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { ElMessage, ElTable, ElMessageBox } from 'element-plus';
import { simList, simCreate, simRemove } from '@/api/sim'

const route = useRoute()
const routes = ref()
const data = reactive({
    SIM_DATA: []
})
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const form = reactive({
    phone: '',
})
const SearchPhone = ref('')
const loading = ref(true)
const list = reactive({
    limit: 15,
    page: 1,
    phone: ''
})
//分页
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)

onMounted(() => {
    routes.value = route.matched
    getSimList()
})
const getSimList = async () => {
    list.phone = SearchPhone.value
    const simData = await simList(list).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            data.SIM_DATA = data.data
            total.value = data.total
        }
    }).catch((err) => {
        loading.value = false
    })
}
const addPhone = async () => {
    if (!(/^\d{13}$/.test(form.phone))) {
        ElMessage.error("手机号码格式有误，请重填")
        return false;
    }
    const add = await simCreate(form).then(r => {
        const { code, data } = r
        if (code == 200) {
            ElMessage.success('sim添加成功')
            form.phone = ''
            getSimList()
        }
        dialogFormVisible.value = false
    })
}
const cancelFormClick = () => {
    form.phone = ''
    dialogFormVisible.value = false
}
const removeSim = (row) => {
    ElMessageBox.confirm(
        '确认要删除这条数据吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const remove = await simRemove(row.id).then(s => {
                const { code, data } = s
                if (code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getSimList()
                }
            })
        })
        .catch(() => {
        })
}
const searchClick = () => {
    getSimList()
}
const cancelClick = () => {
    SearchPhone.value = ''
    getSimList()
}
watch(SearchPhone, (old) => {
    if (old == '') {
        getSimList()
    }
})
const handleSizeChange = (page) => {
    list.limit = page
    getSimList()
}
const handleCurrentChange = (current) => {
    list.page = current
    getSimList()
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    header {
        background: rgb(68, 171, 247);
        margin-right: 0;

        .el-dialog__title {
            color: #fff;
        }

        .el-dialog__headerbtn i {
            color: #fff;
        }
    }
}

:deep(.el-dialog__close) {
    color: #fff;
}

:deep(.el-button) {
    padding: 2px 10px;
    font-size: 12px;
    letter-spacing: 2px;
}

.dialog-footer {
    .el-button {
        padding: 4px 20px;
        font-size: 14px;
    }
}

.del-btn {
    border-radius: 50px;
    background-color: #fab6b6;
    margin: 10px;
    padding: 6px 10px;
}

.empty {
    img {
        margin-top: 40px;
    }

    p {
        font-size: 16px;
        font-family: 'Courier New', Courier, monospace;
    }
}

.search-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
</style>
